html {
    background: #170F36;
    background-size: cover;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100% !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0px;
    background: #170F36;
    background-size: cover;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100% !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-family: PingFangSC-Medium, PingFang SC;
}

.header {
    width: 100%;
    height: 7.5rem;
    background: url("../image/header_background.png") no-repeat;
    background-size: 100%;
}

.top_tab_button {
    width: 1rem;
    height: 1rem;
    background: url("../image/top_tab_button.png") no-repeat;
    background-size: 100%;
    float: right;
}

.show_top_tab_box {
    display: none;
    background-color: #170F36;
    width: 2rem;
    height: 5.2rem;
    position: absolute;
    top: 0;
    right: 0;
    text-align: left;
}

.show_top_tab_box li {
    width: 80%;
    margin-left: 20%;
    height: 0.7rem;
    line-height: 0.7rem;
    color: #C4A8D1;
}

.show_top_tab_box li:visited {
    color: #D262ED;
}

.activity_time {
    position: absolute;
    top: 4.95rem;
    width: 100%;
    text-align: center;
    font-size: 0.2rem;
    color: white;
}

.activity_award_box {
    margin: 0 auto;
    position: absolute;
    top: 8.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7.16rem;
    height: 5rem;
    background: url("../image/award_background.png") no-repeat center;
    background-size: 95%;
    border: 0.01rem solid;
    border-image: linear-gradient(360deg, rgba(159, 56, 241, 1), rgba(224, 76, 246, 1)) 1 1;
}

.activity_award_list {
    width: 6.4rem;
    height: 4.4rem;
    margin: 0 auto;
    margin-top: 0.45rem;
    text-align: center;
}

.award_list_box {
    display: inline-block;
    width: 1.4rem;
    height: 1.97rem;
    background: url("../image/award_border.png") no-repeat;
    background-size: 100%;
    margin: 0.06rem 0.05rem;
    color: #C4A8D1;
}

.award_img {
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0.2rem auto;
}

.award_name {
    display: block;
    width: 100%;
    height: 0.3rem;
    font-size: 0.22rem;
}

.activity_award_box_bottom {
    position: relative;
    bottom: 0;
    width: 7.21rem;
    height: 0.2rem;
    background: url("../image/border_bottom.png") no-repeat;
    background-size: 100%;
    transform: translateX(-50%);
    left: 50%;
}

.time_step_box {
    position: absolute;
    top: 14rem;
    width: 100%;
    height: 1rem;
}

.time_step_list_box {
    width: 100%;
    height: 100%;
    position: absolute;
    font-weight: 400;
}

.tine_step_name {
    width: 100%;
    height: 0.4rem;
}

.tine_step_mark {
    width: 100%;
    height: 0.2rem;
    background: url("../image/step_mark.png") no-repeat center;
    background-size: 13%;
}

.tine_step_mark_last {
    width: 100%;
    height: 0.2rem;
    background: url("../image/step_mark_last.png") no-repeat center;
    background-size: 13%;
}

.tine_step_mark_online{
    width: 100%;
    height: 0.2rem;
    background: url("../image/line_4.png") no-repeat center;
    background-size: 13%;
}

.time_step_list {
    display: inline-block;
    width: 1.77rem;
    height: 1rem;
    text-align: center;
    color: #E04CF6;
    position: relative;
}

.tine_step_time {
    height: 0.4rem;
    font-size: 0.2rem;
    line-height: 0.4rem;
}

.time_step_list_line_one {
    width: 100%;
    height: 0.015rem;
    background-color: #E04CF6;
    border: none;
    position: relative;
    top: 0.45rem;
}

.time_step_list_line_two {
    width: 100%;
    height: 0.01rem;
    background-color: #E04CF6;
    border: none;
    position: relative;
    top: 0.6rem;
}

.tine_step_name {

}

.activity_title {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    background: url("../image/activity_title.png") no-repeat center;
    background-size: 70%;
    font-family: JZhongYi;
    color: #F616FC;
    font-size: 0.34rem;
    letter-spacing: 2px;
    text-align: center;
}

.position_top_tab {
    position: absolute;
    top: 15.4rem;
    width: 100%;
    height: 0.93rem;
}

.position_tab {
    width: 7.16rem;
    height: 0.8rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    line-height: 0.8rem;
}

.position_show_tab {
    width: 1.76rem;
    height: 0.8rem;
    border-radius: 0.3rem 0.3rem 0 0;
    border: 0.02rem solid #E04CF6;
    color: #D262ED;
    float: left;
    text-align: center;
    font-family: JZhongYi;
    font-size: 0.3rem;
    border-bottom: none;
    font-weight: 500;
}

.active {
    color: white;
    background: url("../image/position_tab_background.png") no-repeat;
    background-size: 100%;
    border: none;
}

.position_bottom_background {
    width: 100%;
    height: 0.12rem;
    background-color: #261B52;
    position: absolute;
    bottom: 0;
    border-top: 0.01rem solid #E04CF6;
}

.rank_main_show {
    position: absolute;
    top: 16.7rem;
    width: 100%;
    /*display: none;*/
}

.position_title {

}

.rank_show_box {
    margin: 0 auto;
    margin-top: 0.4rem;
    width: 7.16rem;
    min-height: 0.2rem;
    border: 0.01rem solid;
    border-image: linear-gradient(360deg, rgba(159, 56, 241, 1), rgba(224, 76, 246, 1)) 1 1;
}

.rank_top_box {
    margin: 0.21rem auto;
    width: 6.75rem;
    height: 4.15rem;
    background: url("../image/rank_top_background.png") no-repeat;
    background-size: 100%;
}

.rank_top_second {
    float: left;
    width: 2.23rem;
    height: 2.6rem;
    padding-top: 1.24rem;
}

.rank_top_first {
    float: left;
    width: 2.23rem;
    height: 3.2rem;
    padding-top: 0.8rem;
}

.rank_top_three {
    float: left;
    width: 2.23rem;
    height: 2.6rem;
    padding-top: 1.3rem;
}

.rank_top_image {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    display: flex;
    position: relative;
    top: -2.72rem;
}

.rank_top_image img {
    width: 1.2rem;
    border-radius: 0.6rem;
}

.rank_rang {
    margin-top: -1.65rem;
    margin-left: 0.48rem;
    position: relative;
    top: -2.72rem;
}

.rank_rang img {
    width: 1.24rem;
}

.rank_top_tower {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto;
    position: relative;
    left: -0.19rem;
    top: -0.5rem;
}

.rank_top_tower img {
    width: 2.6rem;
}

.rank_text_box {
    width: 100%;
    height: 1.2rem;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    position: relative;
    top: -2.35rem;
}

.rank_top_name {
    font-size: 0.24rem;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 0.36rem;
    min-height: 0.36rem;
}

.rank_top_score {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    color: #F616FC;
}

.rank_main_rank_show {
    width: 7.16rem;
    min-height: 2rem;
}

.rank_title_head {
    width: 100%;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
}

.rank_title_head_list {
    display: inline-block;
    color: #777B97;
}

.rank_title_head_id {
    width: 1.1rem;
}

.rank_title_head_name {
    width: 3.3rem;
}

.rank_title_advanced_mark{
    width: 0.4rem;
    margin-right: 0.2rem;
}

.rank_title_advanced_mark img{
    width: 0.4rem;
}

.rank_title_head_sound_type {
    width: 1.8rem;
}
.rank_list_text .rank_title_head_sound_type{
    color: #F616FC;
    font-size: 0.24rem;
}

.my_rank_list_text .rank_title_head_sound_type{
    color: #F616FC;
}

.rank_list_text div {
    vertical-align: middle;
}

.rank_list_text_box {
    margin: 0.3rem auto;
    text-align: center;
}

.rank_text_list {
    display: inline-block;
    text-align: center;
    font-size: 0.36rem;
    color: #FFFFFF;
    font-weight: 500;
}

.list_line_img {
    height: 1.12rem;
    display: inline-flex;
}

.list_line_img img {
    width: 1.14rem;
    min-height: 1.12rem;
    overflow: hidden;
}

.user_info_img {
    border-radius: 0.6rem;
}

.user_rang_img {
    position: absolute;
}

.my_user_info_img {
    position: absolute;
    border-radius: 0.6rem;
}

.my_user_rang_img {
    position: absolute;
}

.list_line_info {
    width: 1.9rem;
    height: 1.12rem;
    margin-left: 0.2rem;
    text-align: left;

}

.list_line_info p {
    font-size: 0.24rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.12rem;
}


.my_rank_list_text {
    width: 7.16rem;
    height: 1.6rem;
    background-color: #261B52;
}

.rank_page_box {
    width: 7.16rem;
    min-height: 0.2rem;
    text-align: center;
    font-size: 0.28rem;
    margin: 0 auto;
}

.page_background {
    margin: 0.5rem auto;
    display: inline-block;
    width: 0.5rem;
    background-color: #261B52;
    color: #C4A8D1;
    border-radius: 0.2rem;
}

.page_active {
    background-color: #A93BF2;
    color: #FFFFFF;
}

.union_top_list {
    width: 7.16rem;
    min-height: 3.2rem;
}

.union_top_list_box {
    margin: 0.3rem auto;
    width: 6.6rem;
    min-height: 2.6rem;
}

.union_top_title_show {
    align-items: center;
    width: 100%;
    height: 0.4rem;
    /*line-height: 0.4rem;*/
    color: white;
}

.union_top_title_show_img {
    display: inline-block;
}

.union_top_title_show_img img {
    display: inline-block;
    vertical-align: middle;
    width: 0.30rem;
    height: 0.4rem;
}

.union_top_number {
    font-size: 0.4rem;
    line-height: 0.4rem;
    vertical-align: middle;
}

.union_top_title_show_text {
    vertical-align: middle;
    display: inline-block;
}

.union_top_name_score_show {
    width: 100%;
    height: 0.36rem;
    margin: 0.1rem 0 auto;
}

.union_top_name {
    width: 3rem;
    color: #FFFFFF;
    line-height: 0.36rem;
    display: inline-block;
}

.union_top_score_box {
    display: inline-block;
    color: #F616FC;
    float: right;
}

.union_top_user_list {
    width: 6.6rem;
    min-height: 1.4rem;
}

.union_user_info_img {
    position: absolute;
    /*left: 0.5rem;*/
    border-radius: 0.6rem;
}

.union_user_rang_img {
    position: absolute;
    /*left: 0.5rem;*/
}

.union_top_user_list_box {
    position: relative;
    display: inline-block;
    width: 3.3rem;
    height: 1.2rem;
    line-height: 1.2rem;
    float: left;
    margin-top: 0.2rem;
    /*border: 0.01rem solid red;*/
}

.rank_award_show {
    width: 100%;
    min-height: 12rem;
    position: absolute;
    top: 16.3rem;
    display: none;
}

.swiper-container {
    width: 100%;
    height: 0.7rem;
    margin: 0.4rem auto;
}

.swiper-slide {
    text-align: center;
    height: 0.68rem;
    line-height: 0.68rem;
    border-radius: 0.4rem;
    font-family: JZhongYi;
    color: #C4A8D1;
    background-color: #261B52;
}

.position_title_slide_1 {

}

.slide_1_first {
    margin: 0.2rem auto;
    width: 6.6rem;
    min-height: 5rem;
    text-align: center;
    /*border: 0.01rem solid red;*/
}

.slide_1_first_title {
    width: 1.6rem;
    height: 0.6rem;
    line-height: 0.6rem;
    margin: 0 auto;
    border: 0.01rem solid;
    color: #F616FC;
    font-family: JZhongYi;
    border-left: none;
    border-right: none;
    border-image: linear-gradient(to right, rgba(153, 78, 172, 0), rgba(224, 76, 246, 1) 50%, rgba(153, 78, 172, 0)) 1 1;
}

.slide_1_first_list_box{
    display: inline-block;
    margin: 0.2rem 0.1rem auto;
    width: 1.82rem;
    height: 2.52rem;
    background: #331257;
    background: url(../image/award_border.png) no-repeat;
    background-size: 100%;
    border-radius: 0.16rem;
}

.slide_1_first_list_img_box{
    vertical-align: middle;
    margin: 0.1rem auto;
    width: 1.2rem;
    height: 1.2rem;
}

.slide_1_first_list_img_box img{
    width: 1.2rem;
    height: 1.2rem;
}

.slide_1_first_list_name{
    /*line-height: 0.3rem;*/
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C4A8D1;
    font-size: 0.24rem;
}

.slide_1_first_list_name p{
    line-height: 0.4rem;
}

.rank_show_box_rule{
    margin: 0.2rem auto;
    width: 6.6rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C4A8D1;
    font-size: 0.24rem;
    line-height: 0.4rem;
    text-align: justify;
    text-justify: distribute-all-lines;
}

.rank_show_box_rule p{

}
.rule_detail_shade {
    display: none;
    width: 100%;
    height: 20rem;
    position: fixed;
    opacity: 0.59;
    overflow: hidden;
    background-color: #000000;
    bottom: 0;
}

.union_top_one{
    display: none;
}

.union_top_two{
    display: none;
}

.union_top_third{
    display: none;
}

.bottom_text{
    margin: 0 auto;
    width: 6rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C4A8D1;
    text-align: center;
    height: 1.2rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
}

.rank_top_image_intimacy{
    width: 2rem;
    height: 1.2rem;
    margin: 0 auto;
    display: flex;
    position: relative;
    top: -2.72rem;
    background: linear-gradient(142deg, #FFD974 0%, #FFE259 19%, #FFBF25 27%, #F6DD9C 62%, #F9D046 100%);
    border-radius: 0.6rem;
}

.rank_top_image_intimacy img {
    width: 1.2rem;
    border-radius: 0.6rem;
}

.rank_rang_intimacy{
    margin-top: -1.65rem;
    margin-left: 0.48rem;
    position: relative;
    top: -1.52rem;
}

.rank_rang_intimacy img {
    width: 1.24rem;
}

.intimacy_send_user{
    position: absolute;
    right: 0rem;
}

.intimacy_from_user{
    position: absolute;
    left: 0rem;
}

.intimacy_num{
    position: absolute;
    top: 0.9rem;
    left: 0.4rem;
}

.intimacy_top_second{
    top: -2.8rem;
    background: linear-gradient(143deg, #FFFFFF 0%, #CBE2F9 45%, #D7ECFE 100%);
}

.intimacy_top_three{
    top: -2.8rem;
    background: linear-gradient(324deg, #DBBFA7 0%, #A28983 58%, #735F41 100%);
}

.intimacy_rank_img_box{
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 1.09rem;
    width: 1.69rem;
    border-radius: 0.6rem;
    background: linear-gradient(324deg,#50ADFF 0%, #A28983 58%,#D04CEB 100%);
}

.intimacy_rank_img_box img{
    width: 1.09rem;
    min-height: 1.09rem;
    overflow: hidden;
}

.intimacy_rank_send_user{
    position: absolute;
}

.intimacy_rank_from_user{
    position: absolute;
}

.intimacy_title_head_name{
    width: 3.8rem;
}

.intimacy_my{
    /*margin-left: 0.4rem;*/
}

.intimacy_rank_my_user{
    position: absolute;
    /*left: 0.6rem;*/
}

.my_intimacy_user_info_img{
    left: 0.577rem;
}

.slide_show{
    display: none;
}

.toTop{
    position: fixed;
    right: 0;
    bottom: 0.6rem;
}

.toTop img{
    width: 1rem;
}

.intimacy_top_name{
    display: inline-block;
}

.intimacy_title_head_name .list_line_info p{
    display: inline-block;
    width: 1.4rem;
    line-height: 0.4rem;
    text-align: left;
}

.and_class{
    display: inline-block;
    width: 0.4rem;
    font-size: 0.24rem;
    color: #F616FC;
    text-align: left;
    line-height: 0.4rem;
}

.send_user_name{
    width: 1.4rem;
    display: inline-block;
    text-align: left;
}
.to_user_name{
    width: 1.4rem;
    display: inline-block;
    text-align: left;
}

.my_intimacy_user_info_img{
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 0.6rem;
    position:absolute;
    left: 0;
    width: 1.09rem;
    height: 1.09rem;
}

.my_user_info_show_img{
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 1.14rem;
    width: 1.14rem;
    border-radius: 0.6rem;
    position: absolute;
}

.my_intimacy_user_info_show_img{
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 1.09rem;
    width: 1.7rem;
    border-radius: 0.6rem;
    position: absolute;
}
.my_user_info_level{
    margin-left: 1.2rem;
    width: 3rem;
}

.footer{
    width: 100%;
    height: 0.6rem;
    color:#C4A8D1;
    text-align: center;
    text-decoration: underline;
}

.award_img img{
    width: 1rem;
}

.alert_style_box {
    display: none;
}

.alert_box {
    width: 5rem;
    height: 2.6rem;
    position: fixed;
    top: 4.5rem;
    border-radius: 0.2rem;
    background-color: #FFFFFF;
    left: .9rem;
    font-size: 0.36rem;
    font-family: PingFangSC-Medium, PingFang SC;
    text-align: center;
    padding: 0.5rem 0.3rem;
}

.alert_box p {
    margin-top: 0.3rem;
}

.alert_close_button {
    width: 5.6rem;
    height: 1rem;
    line-height: 1rem;
    position: fixed;
    top: 7rem;
    left: .9rem;
    font-size: 0.36rem;
    font-family: PingFangSC-Medium, PingFang SC;
    text-align: center;
    cursor: pointer;
}

.alert_box_line {
    width: 5.6rem;
    position: fixed;
    top: 6.8rem;
    left: .9rem;
    border: none;
    border-top: 1px solid #969696;
}

